import { Outlet, useNavigate } from 'react-router-dom'
import './App.css'
import { useEffect, useState } from 'react'
import axios from 'axios'
import { Select, Space } from 'antd';

function App() {
  const navigate=useNavigate()
  const [theme,setTheme]=useState(localStorage.getItem('theme')||'light')

  useEffect(()=>{
    axios.get('/api/article/list')
    checkZt(theme)
  },[])

  const checkZt=(value)=>{
    const htmlNode=document.documentElement
    // htmlNode.className=htmlNode.className=='dark'?'light':'dark'
    // const currentTheme=htmlNode.getAttribute('data-theme')||''
    // htmlNode.setAttribute('data-theme',currentTheme=='dark'?'light':'dark')
    htmlNode.setAttribute(
      'data-theme',
      value
    )
    setTheme(value)
    localStorage.setItem('theme',value)
  }

  return (
   <div>
     <Select
      defaultValue={theme}
      style={{ width: 120 }}
      onChange={checkZt}
      options={[
        { value: 'light', label: '日间' },
        { value: 'dark', label: '夜间' },
        { value: 'green', label: '清新绿' },
        { value: 'pink', label: '少女粉' },
        { value: 'blue', label: '天空蓝' },
      ]}
    />
    <br />
    <button onClick={()=>navigate('/data')}>data页面</button>
    <br />
    <button onClick={()=>navigate('/data1')}>data1页面</button>
    <br />
    <Outlet></Outlet>
   </div>
  )
}

export default App
